/**
 * 按原型只有一个新建按钮
 */
import React, { Component } from 'react';
import { Button, Select, Input, DatePicker, Modal, message } from 'antd';
import Export from '../../components/export';
import { columns } from './table';
import PermissionControl from '../../components/permissionControl';

const Option = Select.Option;
const { RangePicker } = DatePicker;

const styles = {
	main: {
		margin: '1em 0'
	},
	bv: {
		float: 'right'
	},
	select: {
		width: '10em'
	},
	rp: {
		display: 'inline-block',
		width: '200px',
		paddingLeft: '10px'
	},
	input: {
		width: '10em',
		margin: '0 1em'
	},
	but: {
		marginRight: '1em'
	},
	s: {
		marginTop: '1em',
		height: '28px'
	}
};

const options = [
	{ name: '产品名称', value: 'productName' },
	{ name: '产品品类', value: 'categoryName' },
	{ name: 'Product Key', value: 'productKey' }
];


class Filter extends Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			modalVisible: false,
			key: 'productName',
			keyWord: '',
			dateRange: []
    };
	}

	getQueryData() {
		const { key, keyWord, dateRange } = this.state;
		return {
			[key]: keyWord,
			startUpdateTime: dateRange[0] ? dateRange[0].format('YYYY-MM-DD HH:mm:ss') : '',
			endUpdateTime: dateRange[1] ? dateRange[1].format('YYYY-MM-DD HH:mm:ss') : '',
		};
	}

	delete = () => {
		const { keys } = this.props;
		this.setState({ modalVisible: false });
		this.props.delete(keys);
	}

	openModal = () => {
		const { keys } = this.props;
		if (keys && keys.length) this.setState({ modalVisible: true });
		else message.warning('请选择要删除的产品');
	}

	keyChange = key => {
		this.setState({ key });
	}

	change = e => {
		this.setState({ keyWord: e.target.value });
	}

	dateChange = value => {
		this.setState({
      dateRange: value && value.length > 1 ? [value[0].startOf('day'), value[1].endOf('day')] : value
    });
	}

	search = () => {
		// 收集参数，调用上层
		console.log('this.getQueryData()', this.getQueryData());
		this.props.query(this.getQueryData());
	}

	reset = () => {
		// 清理参数，调用上层
		this.setState({
			key: 'productName',
			keyWord: '',
			dateRange: []
		}, this.search);
	}

	render() {
		const { key, keyWord, dateRange, modalVisible } = this.state;
		const { keys, exportTitle } = this.props;
		return (
			<div style={styles.main}>
				<div>
					<Select style={styles.select} value={key} onChange={this.keyChange}>
						{options.map(o => <Option value={o.value}>{o.name}</Option>)}
					</Select>
					<Input placeholder="输入关键字" style={styles.input} value={keyWord} onChange={this.change} />
					<RangePicker
						style={styles.rp}
						onChange={this.dateChange}
						value={dateRange}
          />
					<div style={styles.bv}>
						<Button
							type="primary"
							style={styles.but}
							onClick={this.search}
							icon="search"
							className="search"
						>搜索</Button>
						<Button onClick={this.reset} icon="sync">重置</Button>
					</div>
				</div>
				<div style={styles.s}>
					<div style={styles.bv}>
						<Export
							columns={columns}
							title={exportTitle}
							queryData={this.getQueryData()}
							ids={keys}
						/>
						<PermissionControl url="/product/product/add">
							<Button
								style={styles.but}
								onClick={() => this.props.add('new')}
								icon="plus"
								className="opt-but"
							>
								添加产品
							</Button>
						</PermissionControl>
						<PermissionControl url="/product/product/delete">
							<Button onClick={this.openModal} icon="delete" className="opt-but">删除</Button>
						</PermissionControl>
					</div>
				</div>
				<Modal
					title="删除选中产品"
					visible={modalVisible}
					onOk={this.delete}
					onCancel={() => this.setState({ modalVisible: false })}
				>
					确定要删除选中的产品吗？
				</Modal>
			</div>
		);
	}
}

export default Filter;
